<template>
  <div class="app-container">

    <el-tabs v-model="objectPropertyActiveId"  @tab-click="handleTabClick" type="card">
      <el-tab-pane :label="item.nameZh" :name="item.id"  v-for="(item, index) of objectPropertyOptions"></el-tab-pane>
    </el-tabs>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:dynamic:associate']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:dynamic:associate']"
        >删除
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="dynamicDataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="资源ID" align="center" prop="id"/>
      <el-table-column :label="item.nameZh" align="center" :prop="item.nameEn" v-for="(item,i) in showFieldList">
        <template #default="scope" v-if="item.dataTypeName == 'imgPath'">
          <el-image class="table-td-thumb" :src="imgPathBase+scope.row[item.nameEn]"
                    :preview-src-list="[imgPathBase+scope.row[item.nameEn]]">
          </el-image>
        </template>
        <template #default="scope" v-else-if="item.dataTypeName == 'selectSingle' || item.dataTypeName == 'selectMultiple'">
          {{scope.row[item.nameEn] | getDictLabel(item.dictType.dictDataList)}}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" align="center" prop="create_time"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" hidden>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:dynamic:associate']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="添加关联数据资源" :visible.sync="openOpData" width="80%" :close-on-click-modal="false" append-to-body>
      <dialog-dynamic-op-data :classesIdTarget="classesIdTarget" :sourceDataId="sourceDataId" :objectPropertyId="objectPropertyActiveId"
                              @refreshTheListMethod="refreshTheListMethod" @closeSubpage="cancel"
                              v-if="openOpData"></dialog-dynamic-op-data>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openOpData = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import * as itemElement from "@/components/BaseControl/itemElement.js"
    import { associationList, associationRemove } from "@/api/system/objectProperty"
    import dialogDynamicOpData from "./indexOpData";


    import {
        listObjectProperty,
    } from "@/api/system/objectProperty";

    export default {
        name: "dynamicOp",
        dicts: ['business_whether'],
        components: {
            dialogDynamicOpData,
            ...itemElement,
        },
        props: {
            classesIdSource: {
                type: String,
                default: '0'
            },
            sourceDataId: {
                type: String,
                default: '0'
            }
        },
        data() {
            return {
                openOpData: false,
                //选中的关联表id
                objectPropertyActiveId: '',
                // 关联类选择
                objectPropertyOptions: [],
                classesIdTarget: null,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 总条数
                total: 0,
                // 动态资源表格数据
                dynamicDataList: [],
                //展示字段
                showFieldList: [],
                // 查询参数
                queryParams: {
                    objectPropertyId: null,
                    sourceDataId: null,
                    pageNum: 1,
                    pageSize: 10,
                },
            };
        },
        filters: {
            getDictLabel: function(dictValue, dictDataList) {
                let filter = dictDataList.filter(x=>x.dictValue == dictValue);
                if(filter.length){
                    return filter[0]["dictLabel"]
                }
                return dictValue;
            }
        },
        computed: {},
        created() {
            const classesIdSourceTmp = this.classesIdSource;
            listObjectProperty({
                classesId: classesIdSourceTmp
            }).then(response => {
                this.objectPropertyOptions = response.rows.map(item=>{
                    let tmp =  {
                      ...item
                    };
                    tmp["id"] = item.id.toString();
                    return tmp;
                });
                this.objectPropertyActiveId = this.objectPropertyOptions[0].id;
                this.classesIdTarget = this.objectPropertyOptions[0].relevanceClassesId;
                this.queryParams.objectPropertyId = this.objectPropertyActiveId;
                this.queryParams.sourceDataId = this.sourceDataId;
                this.getList();
            });
        },
        methods: {
            handleTabClick() {
                this.queryParams.objectPropertyId = this.objectPropertyActiveId;
                this.classesIdTarget = this.objectPropertyOptions.filter(x=>x.id == this.objectPropertyActiveId)[0].relevanceClassesId;
                this.getList();
            },
            //由子页面调用
            refreshTheListMethod() {
                this.getList();
            },
            /** 查询公共基础字段列表 */
            getList() {
                this.loading = true;
                associationList(this.queryParams).then(response => {
                    this.dynamicDataList = response.data.list;
                    this.total = response.data.total;
                    this.showFieldList = response.data.showField;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.openOpData = false;
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.opId)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.openOpData = true;
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                let idsArr = [];
                if (row.opId) {
                    idsArr.push(row.opId)
                }
                if (this.ids.length > 0) {
                    idsArr = idsArr.concat(this.ids);
                }
                if (idsArr.length > 0) {
                    const data = {
                        objectPropertyId: this.queryParams.objectPropertyId,
                        ids: idsArr
                    };
                    this.$modal.confirm('是否确认删除动态勾选数据项？').then(function () {
                        return associationRemove(data);
                    }).then(() => {
                        this.getList();
                        this.$modal.msgSuccess("删除成功");
                    }).catch(() => {
                    });
                } else {
                    this.$modal.msgWarning("请选择需要删除的数据项!");
                }

            },
        }
    };
</script>
<style>
  .el-form-item .el-select {
    width: 100%;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0 !important;
  }

  .el-row {
    margin-bottom: 0px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .col-lg-6 {
    float: left;
    width: 50%;
    padding: 0 10px;
  }

  .col-lg-6 .el-date-editor {
    width: 100%;
  }

  .col-md-12 {
    float: left;
    width: 100%;
    padding: 0 10px;
  }

  .el-dialog__body {
    overflow-y: auto;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
</style>
